<template>
  <el-form class="grid" :model="formModel" v-bind="form.attrs">
    <template v-for="field of fields" :key="field.id">
      <el-form-item
        :label="field['field-label']"
        :prop="field.model"
        :style="{ 'grid-area': field['grid-area'] }"
      >
        <el-input
          v-if="field['field-type'] === 'input'"
          v-model="formModel[field.model]"
          v-bind="field.attrs"
        />
        <el-input-number
          v-else-if="field['field-type'] === 'input-number'"
          v-model="formModel[field.model]"
          v-bind="field.attrs"
        />
        <el-mention
          v-else-if="field['field-type'] === 'mention'"
          v-model="formModel[field.model]"
          :options="field.options"
          v-bind="field.attrs"
        />
        <el-radio-group
          v-else-if="field['field-type'] === 'radio-group'"
          v-model="formModel[field.model]"
          v-bind="field.attrs"
        >
          <el-radio
            v-for="option of field.options"
            :key="option.value"
            :value="option.value"
            :name="field.name"
          >
            {{ option.label }}
          </el-radio>
        </el-radio-group>
        <el-checkbox-group
          v-else-if="field['field-type'] === 'checkbox-group'"
          v-model="formModel[field.model]"
          v-bind="field.attrs"
        >
          <el-checkbox
            v-for="option of field.options"
            :key="option.value"
            :value="option.value"
            :name="field.name"
          >
            {{ option.label }}
          </el-checkbox>
        </el-checkbox-group>
        <el-rate
          v-else-if="field['field-type'] === 'rate'"
          v-model="formModel[field.model]"
          v-bind="field.attrs"
        />
        <el-select
          v-else-if="field['field-type'] === 'select'"
          v-model="formModel[field.model]"
          v-bind="field.attrs"
        >
          <el-option
            v-for="option of field.options"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
        <el-select
          v-else-if="field['field-type'] === 'select-group'"
          v-model="formModel[field.model]"
          v-bind="field.attrs"
        >
          <el-option-group v-for="og of field.options" :key="og.label" :label="og.label">
            <el-option
              v-for="option of og.options"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-option-group>
        </el-select>

        <el-select-v2
          v-else-if="field['field-type'] === 'select-v2'"
          v-model="formModel[field.model]"
          :options="field.options"
          v-bind="field.attrs"
        />
        <el-select-v2
          v-else-if="field['field-type'] === 'select-v2-group'"
          v-model="formModel[field.model]"
          :options="field.options"
          v-bind="field.attrs"
        />
        <el-slider
          v-else-if="field['field-type'] === 'slider'"
          v-model="formModel[field.model]"
          v-bind="field.attrs"
        />
        <el-switch
          v-else-if="field['field-type'] === 'switch'"
          v-model="formModel[field.model]"
          v-bind="field.attrs"
        />
        <el-date-picker
          v-else-if="field['field-type'] === 'date-picker'"
          v-model="formModel[field.model]"
          v-bind="field.attrs"
        />
        <el-time-picker
          v-else-if="field['field-type'] === 'time-picker'"
          v-model="formModel[field.model]"
          v-bind="field.attrs"
        />
        <el-time-select
          v-else-if="field['field-type'] === 'time-select'"
          v-model="formModel[field.model]"
          v-bind="field.attrs"
        />
        <el-transfer
          v-else-if="field['field-type'] === 'transfer'"
          v-model="formModel[field.model]"
          :data="field.options"
          v-bind="field.attrs"
        />
        <el-tree-select
          v-else-if="field['field-type'] === 'tree-select'"
          v-model="formModel[field.model]"
          :data="field.options"
          v-bind="field.attrs"
        />
        <el-cascader
          v-else-if="field['field-type'] === 'cascader'"
          v-model="formModel[field.model]"
          :options="field.options"
          v-bind="field.attrs"
        />
        <el-color-picker
          v-else-if="field['field-type'] === 'color-picker'"
          v-model="formModel[field.model]"
          v-bind="field.attrs"
        />
        <WangEditor
          v-else-if="field['field-type'] === 'wang-editor'"
          v-model="formModel[field.model]"
          v-bind="field.attrs"
          ref="wang-editor"
        />
        <ImageUpload
          v-else-if="field['field-type'] === 'image-upload'"
          v-model="formModel[field.model]"
          v-bind="field.attrs"
          ref="image-upload"
        />
        <component
          v-else-if="field['field-type'] in custom"
          :is="custom[field['field-type']]"
          v-model="formModel[field.model]"
          v-bind="field.attrs"
        />
      </el-form-item>
    </template>

    <el-form-item
      class="-row-start-1 col-span-full justify-center"
      :style="{
        'grid-area': 'form-submit',
        ...submitStyle
      }"
    >
      <el-button type="primary" @click="onSubmit" :loading="loading">
        {{ submitText }}
      </el-button>
      <el-button v-if="resetText" @click="onReset">
        {{ resetText }}
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
// import useHttp from '@/hooks/useHttp'
import ExampleAutocomplete from './autocomplete/ExampleAutocomplete.vue'
import TemplateAutocomp from './autocomplete/TemplateAutocomp.vue'
import ImageUpload from './upload/ImageUpload.vue'
import PictureCardUpload from './upload/PictureCardUpload.vue'
import PictureUpload from './upload/PictureUpload.vue'
import FileUpload from './upload/FileUpload.vue'
import DragUpload from './upload/DragUpload.vue'
import WangEditor from './editor/WangEditor.vue'
import RemoteObjectSelect from './select/RemoteObjectSelect.vue'
import RemoteObjectTransfer from './transfer/RemoteObjectTransfer.vue'

interface Props {
  fields: FormGlobalType['fields']
  form: FormGlobalType['form']
  submitText: FormGlobalType['submitText']
  resetText?: FormGlobalType['resetText']
  submitStyle?: FormGlobalType['submitStyle']
  loading: boolean
}

const props = defineProps<Props>()

const formModel = reactive({ ...props.form.model })

const custom = {
  'example-autocomplete': ExampleAutocomplete,
  'template-autocomplete': TemplateAutocomp,
  'image-upload': ImageUpload,
  'picture-card-upload': PictureCardUpload,
  'picture-upload': PictureUpload,
  'file-upload': FileUpload,
  'drag-upload': DragUpload,
  'wang-editor': WangEditor,
  'remote-object-select': RemoteObjectSelect,
  'remote-object-transfer': RemoteObjectTransfer
}

const wangEditorRef = useTemplateRef('wang-editor')
const imageUploadRef = useTemplateRef('image-upload')

// const { data, request } = useHttp<ApiResponseData<D>, typeof props.form.model>()

const emit = defineEmits<{
  // success: [data: D]
  // error: [message: string | undefined]
  submit: [data: typeof props.form.model, string[]]
  reset: [data: typeof props.form.model]
}>()

// onMounted(() => {
//   console.log(editor.value)
// })

const onSubmit = async () => {
  const removeImages: string[] = []
  if (Array.isArray(wangEditorRef.value)) {
    for (const e of wangEditorRef.value) {
      removeImages.push(...e.deleteImage())
    }
  }
  if (Array.isArray(imageUploadRef.value)) {
    for (const e of imageUploadRef.value) {
      removeImages.push(...e.deleteImage())
    }
  }
  emit('submit', { ...formModel }, removeImages)
  // await request(
  //   props.form.action,
  //   { ...formModel },
  //   {
  //     method: props.form.method
  //   }
  // )
  // if (data.value?.status) {
  //   emit('success', data.value.data)
  // } else {
  //   emit('error', data.value?.message)
  // }
}

const onReset = () => {
  emit('reset', { ...Object.assign(formModel, props.form.model) })
}

provide('formModel', formModel)
</script>

<style scoped lang="scss"></style>
